<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>


<ol class="dd-list">
    <s:iterator value="departList" id="list">
        <li class="dd-item dd3-item" data-id="<s:property value="#list.id"/>" data-name="<s:property value="#list.name"/>">
            <div class="dd-handle dd3-handle">
                Drag
            </div>
            <div class="dd3-content" style="cursor:pointer">
				<span key="name">
					<span class="badge bg-color-greenLight txt-color-white">1</span> <s:property value="#list.name"/>
				</span>
                <div class="pull-right">
                    <a key="ajax_department_edit" title="编辑" 	class="btn btn-info  btn-xs" href="javascript:void(0);"><i class="fa fa-lg fa-edit"></i></a>
                    <a key="ajax_department_delete" title="删除" class="btn btn-danger  btn-xs" href="javascript:void(0);"><i class="fa fa-lg fa-trash-o"></i></a>
                </div>
            </div>
            <s:if test="#list.children != null">
                <ol class="dd-list">
                    <s:iterator value="#list.children" id="list2">
                        <s:if test="#list2.state.name() == 'Enable'">
                            <li class="dd-item dd3-item" data-id="<s:property value="#list2.id"/>" data-name="<s:property value="#list2.name"/>">
                                <div class="dd-handle dd3-handle">
                                    Drag
                                </div>
                                <div class="dd3-content" style="cursor:pointer">
								<span key="name">
									<span class="badge bg-color-greenLight txt-color-white">2</span> <s:property value="#list2.name"/>
								</span>

                                    <div class="pull-right">
                                        <a key="ajax_department_edit" title="编辑" 	class="btn btn-info  btn-xs" href="javascript:void(0);"><i class="fa fa-lg fa-edit"></i></a>
                                        <a key="ajax_department_delete" title="删除" class="btn btn-danger  btn-xs" href="javascript:void(0);"><i class="fa fa-lg fa-trash-o"></i></a>

                                    </div>
                                </div>
                                <s:if test="#list2.children != null">
                                    <ol class="dd-list">
                                        <s:iterator value="#list2.children" id="list3">
                                            <s:if test="#list3.state.name() == 'Enable'">
                                                <li class="dd-item dd3-item" data-id="<s:property value="#list3.id"/>" data-name="<s:property value="#list3.name"/>">
                                                    <div class="dd-handle dd3-handle">
                                                        Drag
                                                    </div>
                                                    <div class="dd3-content" style="cursor:pointer">
												<span key="name">
												        <span class="badge bg-color-greenLight txt-color-white">3</span> <s:property value="#list3.name"/>
													</span>
                                                        <div class="pull-right">

                                                            <a key="ajax_department_edit" title="编辑" 	class="btn btn-info  btn-xs" href="javascript:void(0);"><i class="fa fa-lg fa-edit"></i></a>
                                                            <a key="ajax_department_delete" title="删除" class="btn btn-danger  btn-xs" href="javascript:void(0);"><i class="fa fa-lg fa-trash-o"></i></a>

                                                        </div>
                                                    </div>
                                                </li>
                                            </s:if>
                                        </s:iterator>
                                    </ol>
                                </s:if>
                            </li>
                        </s:if>
                    </s:iterator>
                </ol>
            </s:if>
        </li>
    </s:iterator>
</ol>
<script type="text/javascript">
    pageSetUp();
    loadScript("../resource/com/js/plugin/jquery.nestable/jquery.nestable.js",runNestables);
    function runNestables() {
        $('#nestable-menu').on('click', function(e) {
            var target = $(e.target), action = target.data('action');
            if (action === 'expand-all') {
                $('.dd').nestable('expandAll');
            }
            if (action === 'collapse-all') {
                $('.dd').nestable('collapseAll');
            }
        });
        var updateOutput = function(e) {
            var list = e.length ? e : $(e.target), output = list.data('output');
            if (window.JSON) {
                output.val(window.JSON.stringify(list.nestable('serialize')));
                //, null, 2));
            } else {
                output.val('浏览器不支持JSON格式。');
            }

            $("#ajax_department_save").addClass("btn-success");
        };

        $('#ajax_department_nestlist').nestable({
            group : 1
        }).on('change', updateOutput);
        updateOutput($('#ajax_department_nestlist').data('output', $('#nestable-output')));
    }

    $("#ajax_department_nestlist li div.dd3-content span[key=name]").click(function(e) {
        $("#ajax_department_name_selected").html($(this).parent().parent().attr("data-name"));
        ajax_DepartmentId = $(this).parent().parent().attr("data-id");
        var rdata = {keyId:ajax_DepartmentId};
        $("#ajax_member_table").jqGrid('setGridParam',{
            page:1,
            datatype:'json',
            postData:rdata
        }).trigger("reloadGrid");
    });

    $("#ajax_department_nestlist li a[key=ajax_department_edit]").click(function(e) {
        var ajax_DepartmentId = $(this).parent().parent().parent().attr("data-id");
        fn_edit(ajax_DepartmentId);
    });
    $("#ajax_department_nestlist li a[key=ajax_department_delete]").click(function(e) {
        var ajax_DepartmentId = $(this).parent().parent().parent().attr("data-id");
        fn_delete(ajax_DepartmentId);
    });

</script>
